<template>
  <div class="web-main">
    <!--<div class="web-main-chars-btn"><el-button type="primary" @click="toChartsHidden('reportFromFour')">报表</el-button></div>-->
    <div style="display: flex;">
      <div class="mr5" style="flex:5">
        <!--大屏图表-->
        <div style="min-width: 800px;position: relative;">
          <div class="fixed-tool">
            <!--查询条件-->
            <div class="main-header">
              <el-form class="web_form bigScreenCharts" :inline="true" :class="{'web_form_active': searchFlag }"
                       label-width="80px">
                <el-form-item label="车队公司">
                  <!--<el-input v-model="condition.fleetName" clearable placeholder="车队公司" style="width: 160px"></el-input>-->
                  <el-select v-model="condition.fleetName" class="w160"
                             clearable filterable remote reserve-keyword placeholder="请输入关键词"
                             :remote-method="getQueryInputListOneFunc" @focus="queryInputListOneFocus"
                             @change="selectCorp($event,'fleetName')">
                    <el-option v-for="(item,index) in queryInputListOne" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="地区名称" style="margin-bottom: 0">
                  <el-cascader
                    class="w160"
                    placeholder="任意搜索地区"
                    :options="areaData"
                    filterable clearable
                    change-on-select
                    @change="startAddressChange"
                    v-model="selectedOptionsStart"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="车牌号">
                  <!--<el-input v-model="condition.plateLicenseNo"  clearable placeholder="车牌号" style="width: 160px"></el-input>-->
                  <el-select v-model="condition.plateLicenseNo" class="w160"
                             clearable filterable remote reserve-keyword placeholder="请输入关键词"
                             :remote-method="getQueryInputListTwoFunc" @focus="queryInputListTwoFocus"
                             @change="selectCorp($event,'plateLicenseNo')">
                    <el-option v-for="(item,index) in queryInputListTwo" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="车辆状态">
                  <el-select v-model="condition.type" class="w160" clearable filterable remote reserve-keyword placeholder="请选择状态">
                    <el-option key="1" label="运行" value="10"></el-option>
                    <el-option key="2" label="风险" value="20"></el-option>
                    <el-option key="3" label="故障" value="30"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="search-box" style="margin-bottom: 18px;margin-left: 15px;">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" @click="resetSearch">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <!--左侧统计-->
            <div v-show="leftPanel" class="left-count-panel">
              <div class="box-card">
                <div class="mb5">{{leftHeaderTitle}}统计:</div>
                <div v-show="condition.type === '' || condition.type === '10'" class="flex-space-between mb5" @click="queryStatusTypeClick('10')">
                  <div class="c-65ea8f">运行: <span class="">{{countNum.normalSum}}辆</span></div>
                  <!--<i class="el-icon-arrow-right c-1E90FF"></i>-->
                </div>
                <div v-show="condition.type === '' || condition.type === '20'" class="flex-space-between mb5" @click="queryStatusTypeClick('20')">
                  <div class="c-FFD700">风险: <span class="">{{countNum.riskSum}}辆</span></div>
                  <!--<i class="el-icon-arrow-right c-1E90FF"></i>-->
                </div>
                <div v-show="condition.type === '' || condition.type === '30'" class="flex-space-between" @click="queryStatusTypeClick('30')">
                  <div class="c-ff340e">故障: <span class="">{{countNum.faultSum}}辆</span></div>
                  <!--<i class="el-icon-arrow-right c-1E90FF"></i>-->
                </div>
              </div>
            </div>
            <!--右侧提示面板-->
            <!--<div v-show="rightPanel" class="right-tip-panel">-->
            <div class="right-tip-panel" style="display: none;">
              <div class="box-card">
                <div class="mb10">
                  <div class="box-card-header"><span>驾驶行为</span><i class="el-icon-arrow-down c-1E90FF" @click="boxCardClick('0')"></i></div>
                  <div class="box-card-content" v-show="boxCardShow0">
                    <div>急加速<span class="c-ff340e ml5">风险操作</span></div>
                    <div>急转弯<span class="c-ff340e ml5">风险操作</span></div>
                  </div>
                </div>
               <div>
                 <div class="box-card-header"><span>车辆设备</span><i class="el-icon-arrow-down c-1E90FF" @click="boxCardClick('1')"></i></div>
                 <div class="box-card-content" v-show="boxCardShow1">
                   <div>电压<span class="c-ff340e ml5">风险</span></div>
                   <div>电流<span class="c-ff340e ml5">风险</span></div>
                 </div>
               </div>
              </div>
            </div>
          </div>
           <!--图表1-->
          <one-select-charts
            ref="oneSelectChartsRef"
            @map-area-click="mapAreaClickFunc"
            @car-click="carClickFunc">
          </one-select-charts>
        </div>
      </div>
      <!--右侧-->
      <div style="min-width: 260px;flex: 1;background-color: #eee;border-radius: 8px;">
        <!--省 市 车辆列表-->
        <div class="lisa-card-one">
          <div class="lisa-card-content">
            <!--全国 省列表-->
            <div v-show="rightAreaType === ''">
              <div v-show="rightProvinceListData && rightProvinceListData.length>0" class="mb10 bgc-555555 br-8 pad10"
                   @click="tabHeaderClick('province', item, 'rightView')" v-for="(item,index) in rightProvinceListData">
                <div class="lisa-card-header c-DDDCDC pad-b5">
                  {{item.areaName}}<span class="ml20 bold ta-c">共{{item.totalSum || 0}}辆</span>
                </div>
                <div class="lisa-card-tool-item2">
                  <div class="c-65ea8f">正常{{item.normalSum || 0}}辆</div>
                  <div class="c-FFD700">风险{{item.riskSum || 0}}辆</div>
                  <div class="c-red">故障{{item.faultSum || 0}}辆</div>
                </div>
              </div>
              <div v-show="rightProvinceListData.length === 0" class="ta-c c-DDDCDC f20">
                暂无数据
              </div>
            </div>
            <!--省 市列表-->
            <div v-show="rightAreaType === 'province'">
              <div v-show="rightCityListData && rightCityListData.length>0" class="mb10 bgc-555555 br-8 pad10"
                   @click="tabHeaderClick('city', item, 'rightView')" v-for="(item,index) in rightCityListData">
                <div class="lisa-card-header c-DDDCDC pad-b5">
                  {{item.areaName}}<span class="ml20 bold ta-c">共{{item.totalSum || 0}}辆</span>
                </div>
                <div class="lisa-card-tool-item2">
                  <div class="c-65ea8f">正常{{item.normalSum || 0}}辆</div>
                  <div class="c-FFD700">风险{{item.riskSum || 0}}辆</div>
                  <div class="c-red">故障{{item.faultSum || 0}}辆</div>
                </div>
              </div>
              <div v-show="rightCityListData.length === 0" class="ta-c c-DDDCDC f20">
                暂无数据
              </div>
            </div>
            <!--市 区列表-->
            <div class="ta-c" v-show="rightAreaType === 'city'">
              <div v-show="rightCountyListData && rightCountyListData.length>0" class="mb10 bgc-555555 br-8 pad10"
                   @click="tabHeaderClick('county', item, 'rightView')" v-for="(item,index) in rightCountyListData">
                <div class="lisa-card-header c-DDDCDC pad-b5">
                  {{item.areaName}}<span class="ml20 bold ta-c">共{{item.totalSum || 0}}辆</span>
                </div>
                <div class="lisa-card-tool-item2">
                  <div class="c-65ea8f">正常{{item.normalSum || 0}}辆</div>
                  <div class="c-FFD700">风险{{item.riskSum || 0}}辆</div>
                  <div class="c-red">故障{{item.faultSum || 0}}辆</div>
                </div>
              </div>
              <div v-show="rightCountyListData.length === 0" class="ta-c c-DDDCDC f20">
                暂无数据
              </div>
            </div>
            <!--区 车辆列表-->
            <div class="ta-c" v-show="rightAreaType === 'county'">
              <div v-show="rightCarListData && rightCarListData.length>0"  class="mb10 bgc-555555 br-8 pad10"
                   @click="rightCarListClick(item,index)" v-for="(item,index) in rightCarListData">
                <div class="lisa-card-header2 pad-b5">
                  <span style="margin-left: 25px">{{item.plateLicenseNo || ''}}</span>
                </div>
                <div class="lisa-card-tool-item3">
                  <i v-show="item.type === '10'" class="el-icon-success c-65ea8f mr10"></i>
                  <i v-show="item.type === '20'" class="el-icon-warning c-FFD700 mr10"></i>
                  <i v-show="item.type === '30'" class="el-icon-error c-red mr10"></i>
                  <div style="display: flex;flex-direction: column;text-align: left;">
                    <div>设备号:{{item.vin || ''}}</div>
                    <div class="mr5">当前速度:{{item.vehicleSpeed || 0}}km/小时</div>
                    <div class="mr5">上报时间:{{item.acquisitionTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
                    <div class="mr5">剩余电量:{{item.vehBatSoc || 0}}%</div>
                    <div class="">累计里程:{{item.totalDistance || 0}}km</div>
                  </div>
                </div>
              </div>
              <div v-show="rightCarListData.length === 0" class="ta-c c-DDDCDC f20">
                暂无数据
              </div>
            </div>
          </div>
          <!--顶部title-->
          <div class="lisa-card-tool-wrapper">
            <div class="lisa-card-tool">
              <div class="lisa-card-tool-item mr10">{{rightHeaderTitle}}</div>
              <div class="lisa-card-tool-item">车辆情况</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <!--<div style="height: 50px"></div>-->
  </div>
</template>

<script>
  import OneSelectCharts from './bigScreenConfig/oneSelectCharts'
  import * as MonitorMgtAPI from '@/api/monitor'
  import Area from '@/utils/area/index'
  import ProvinceArea from '@/utils/area/provinceCode'
  import * as Utils from '@/utils/index'
  // import AMap from 'AMap'
  // const halfYear = 365 / 2 * 24 * 3600 * 1000
  // const toDayOO = Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 00:00:00')
  // const toDayNow = Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
  // const start = new Date()
  // const toDayWeek = start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  export default {
    name: 'carSituationChartsShow',
    components: { OneSelectCharts },
    data() {
      return {
        areaData: Area, // 省-市-区三级联动选择
        provinceAreaData: ProvinceArea, // 省级code编码表
        selectedOptionsStart: ['', '', ''],
        searchFlag: true,
        leftHeaderTitle: '全国',
        rightHeaderTitle: '全国',
        rightProvinceListData: [],
        rightCityListData: [],
        rightCountyListData: [],
        rightCarListData: [],
        rightAreaType: '', // 行政级别 维度
        rightQueryType: '', // 查询条件 维度
        leftPanel: false, // 面板 显示隐藏
        rightPanel: false, // 面板 显示隐藏
        boxCardShow0: true,
        boxCardShow1: true,
        countNum: {
          faultSum: 0, // 故障
          riskSum: 0, // 风险
          normalSum: 0, // 正常
          totalSum: 0
        },
        condition: {
          type: '',
          areaType: '',
          areaName: '',
          plateLicenseNo: '',
          fleetName: '',
          province: '',
          city: '',
          county: ''
        },
        queryInputListOne: [],
        queryInputListTwo: []
      }
    },
    created() {
    },
    mounted() {
      this.getQueryInputListOneFunc('')
      this.getQueryInputListTwoFunc('')
      this.getList()
    },
    methods: {
      // 选择 设置名称导出 $event,scope.row,'modelNo'
      selectCorp($event, value) {
        console.log('selectCorp(value)', $event, value)
        const that = this
        if (value === 'fleetName') {
          that.condition.plateLicenseNo = null
          that.getQueryInputListTwoFunc('')
        }
      },
      // 输入值 远程模糊查询的 下拉条件列表
      getQueryInputListTwoFunc(val) {
        MonitorMgtAPI.getPlateList({ plate: val, fleet: this.condition.fleetName }).then(res => {
          if (res.data && res.data.length > 0) {
            this.queryInputListTwo = res.data
          } else {
            this.queryInputListTwo = []
            this.condition.plateLicenseNo = val
          }
        }).catch(err => {
          console.log('error', err)
        })
      },
      // 需带 下拉列表清空，避免 首次查询时候 无数值改变 不触发 @change
      queryInputListTwoFocus() {
        // this.queryInputListTwo = []
      },
      // 输入值 远程模糊查询的 下拉条件列表
      getQueryInputListOneFunc(val) {
        MonitorMgtAPI.getVehiclesFleet(val).then(res => {
          // console.log('getVehiclesFleet()-', res);
          if (res.data && res.data.length > 0) {
            this.queryInputListOne = res.data
            // console.log('getVehiclesFleet()-queryInputListOne', this.queryInputListOne);
          } else {
            this.queryInputListOne = []
            this.condition.fleetName = val
          }
        }).catch(err => {
          console.log('error', err)
        })
      },
      // 需带 下拉列表清空，避免 首次查询时候 无数值改变 不触发 @change
      queryInputListOneFocus() {
        // this.queryInputListOne = []
      },
      // 状态筛选
      queryStatusTypeClick(val) {
        console.log('queryStatusTypeClick()', val)
        // this.condition.type = val
        // this.getList()
      },
      // 右侧-车辆列表 点击- 某车辆
      rightCarListClick(item) {
        console.log('rightCarListClick()', item)
      },
      // 子组件 地图上 单个car 点击事件
      carClickFunc(item) {
        // const that = this
        console.log('carClickFunc()', item)
        const { queryType, type } = item
        if (queryType === '' || queryType === 'province' || queryType === 'city' || queryType === 'county') {
          // that.$refs.oneSelectChartsRef.initCharts([item], 'plateLicenseNo', {})
        }
        if (type !== '10') {
          this.rightPanel = true
        } else {
          this.rightPanel = false
        }
      },
      // 子组件 地图上 (单个省份 - 单个城市) 点击事件
      mapAreaClickFunc(item) {
        console.log('mapAreaClickFunc()-item', item)
        let areaType = ''
        const areaName = item.name
        const that = this
        const new_item = that.condition
        // 源自 高德地图 地区行政 区级别 'district'
        if (item.level === 'district') {
          areaType = 'county'
        } else {
          areaType = item.level
        }
        new_item.areaType = areaType
        new_item.areaName = areaName
        that.tabHeaderClick(areaType, new_item, 'mainView')
      },
      // 右侧-全国（点击 省 查看 城市列表） - 省 （点击 城市 查看 车辆列表）
      tabHeaderClick(tabType, item, rightView) {
        console.log('tabHeaderClick()-tabType', tabType, 'item', item, 'rightView', rightView)
        const that = this
        const { areaName, areaType } = item
        that.rightQueryType = areaType
        that.leftHeaderTitle = areaName
        that.rightHeaderTitle = areaName
        that.rightAreaType = tabType
        that.condition.areaName = areaName
        that.condition.areaType = tabType
        if (areaType === 'province') {
          that.condition.province = areaName
        } else if (areaType === 'city') {
          that.condition.city = areaName
        } else if (areaType === 'county') {
          that.condition.county = areaName
        }
        that.queryLeftCarFunc(that.condition, that.rightAreaType, that.rightHeaderTitle)
        if (tabType === 'county') {
          if (that.rightQueryType === 'fleetName' || that.rightQueryType === 'plateLicenseNo' || that.rightQueryType === 'type ') {
            const { province, city, county, plateLicenseNo, fleetName, type } = that.condition
            const toParams = { areaName: '', areaType: '', province, city, county, plateLicenseNo, fleetName, type }
            that.queryRightCountFunc(toParams, that.rightAreaType, that.rightHeaderTitle)
          } else {
            that.queryRightCountFunc(that.condition, that.rightAreaType, that.rightHeaderTitle)
          }
        } else {
          that.queryRightCountFunc(that.condition, that.rightAreaType, that.rightHeaderTitle)
        }
      },
      // getCarCurrentLocationList 查询 全国车辆 分布，左侧 地图
      queryLeftCarFunc(condition, areaType, areaName) {
        console.log('queryLeftCarFunc()-condition', condition, 'areaType', areaType, 'areaName', areaName)
        const that = this
        const { plateLicenseNo, fleetName } = condition
        if (plateLicenseNo) {
          that.rightQueryType = 'plateLicenseNo'
        } else if (fleetName) {
          that.rightQueryType = 'fleetName'
        } else {
          that.rightQueryType = areaType
        }
        MonitorMgtAPI.getCarCurrentLocationList(condition).then(res => {
          if (res.data && res.data.length > 0) {
            const now_data = res.data
            if (areaType === 'county') {
              setTimeout(() => {
                that.rightCarListData = [].concat(res.data)
              }, 50)
            }
            // 遍历得到 各车辆所在 省级code编码集合
            const new_arr = []
            now_data.map(item2 => {
              that.provinceAreaData.find(item => {
                if (item2.province === item.label) {
                  new_arr.push(item.value)
                }
              })
            })
            // console.log('that.provinceAreaData.find()-new_arr', new_arr)
            const toChartsParams = { queryType: that.rightQueryType, areaType: areaType,  provinceCodeList: Array.from(new Set(new_arr)) }
            that.$refs.oneSelectChartsRef.initCharts(now_data, toChartsParams)
          } else {
            if (plateLicenseNo) {
              that.$message({
                message: that.rightHeaderTitle + '没有' + plateLicenseNo +  '车辆',
                type: 'warning',
                duration: 2000
              })
            } else {
              that.$message({
                message: that.rightHeaderTitle + '没有车辆',
                type: 'warning',
                duration: 2000
              })
            }
          }
        }).catch(err => {
          console.log('error', err)
        })
      },
      // getAreaVehicleCount 查询统计数目， 右侧列表
      queryRightCountFunc(condition, areaType, areaName) {
        console.log('queryRightCountFunc()', 'areaType', areaType, 'areaName', areaName)
        const that = this
        const { province, city, county, plateLicenseNo, fleetName, type } = condition
        if (plateLicenseNo) {
          that.leftPanel = false
        } else {
          const toParams = { province: province, city: city, county: county, fleetName: fleetName, plateLicenseNo: plateLicenseNo, type: type,
            areaName: areaName === '全国' ?  '' : areaName, areaType: areaType }
          // 统计查询
          MonitorMgtAPI.getAreaVehicleCount(toParams).then(res => {
            if (res.data) {
              const { faultSum, riskSum, normalSum, totalSum } = res.data.find(item => item.areaType === '合计')
              that.countNum = { faultSum, riskSum, normalSum, totalSum }
              const now_arr = res.data.filter(item => item.areaType !== '合计')
              if (areaType === '') {
                that.rightProvinceListData = now_arr
              } else if (areaType === 'province') {
                that.rightCityListData = now_arr
              } else if (areaType === 'city') {
                that.rightCountyListData = now_arr
              } else if (areaType === 'county') {
                that.rightCarListData = now_arr
              }
            } else {
              that.$message({
                message: areaName + '没有统计数据',
                type: 'warning',
                duration: 2000
              })
            }
          }).catch(err => {
            console.log('error', err)
          })
        }
      },
      // 默认初始  -全国-  大屏地图+ 右侧列表 查询
      getList() {
        const that = this
        that.leftPanel = true
        that.rightPanel = false
        that.rightAreaType = ''
        that.rightQueryType = ''
        that.leftHeaderTitle = '全国'
        that.rightHeaderTitle = '全国'
        const { plateLicenseNo, fleetName, type } = this.condition
        if (plateLicenseNo) {
          that.rightQueryType = 'plateLicenseNo'
          that.leftPanel = false
          that.rightAreaType = 'county'
          that.saveRightAreaTypeFunc(that.condition)
        } else if (fleetName || type) {
          that.rightQueryType = 'fleetName'
          that.leftPanel = true
          that.rightAreaType = 'county'
          that.saveRightAreaTypeFunc(that.condition)
        }  else {
          that.saveRightQueryTypeFunc(that.condition)
        }
        // console.log('rightAreaTyp', that.rightAreaType, 'rightQueryType', that.rightQueryType, 'rightHeaderTitle', that.rightHeaderTitle)
        that.queryLeftCarFunc(that.condition, that.rightAreaType, that.rightHeaderTitle)
        if (that.rightAreaType === 'county') {
          if (that.rightQueryType === 'fleetName' || that.rightQueryType === 'plateLicenseNo') {
            const { province, city, county, plateLicenseNo, fleetName, type } = that.condition
            const toParams = { areaName: '', areaType: '', province, city, county, plateLicenseNo, fleetName, type }
            that.queryRightCountFunc(toParams, that.rightAreaType, that.rightHeaderTitle)
          }
        } else {
          that.queryRightCountFunc(that.condition, that.rightAreaType, that.rightHeaderTitle)
        }
      },
      saveRightQueryTypeFunc(condition) {
        const that = this
        const { county, city, province } = condition
        if (county) {
          that.rightQueryType = 'county'
          that.leftPanel = true
          that.leftHeaderTitle = county
          that.rightHeaderTitle = county
          that.rightAreaType = 'county'
          that.condition.areaName = county
          that.condition.areaType = 'county'
        }  else if (city) {
          that.rightQueryType = 'city'
          that.leftPanel = true
          that.leftHeaderTitle = city
          that.rightHeaderTitle = city
          that.rightAreaType = 'city'
          that.condition.areaName = city
          that.condition.areaType = 'city'
        } else if (province) {
          that.rightQueryType = 'province'
          that.leftPanel = true
          that.leftHeaderTitle = province
          that.rightHeaderTitle = province
          that.rightAreaType = 'province'
          that.condition.areaName = province
          that.condition.areaType = 'province'
        }
      },
      saveRightAreaTypeFunc(condition) {
        const that = this
        const { county, city, province } = condition
        if (county) {
          that.rightHeaderTitle = county
          that.rightAreaType = 'county'
          that.condition.areaName = county
          that.condition.areaType = 'county'
        }  else if (city) {
          that.rightHeaderTitle = city
          that.rightAreaType = 'city'
          that.condition.areaName = city
          that.condition.areaType = 'city'
        } else if (province) {
          that.rightHeaderTitle = province
          that.rightAreaType = 'province'
          that.condition.areaName = province
          that.condition.areaType = 'province'
        }
      },
      //  boxCard 显示隐藏
      boxCardClick(val) {
        if (val === '0') {
          this.boxCardShow0 = !this.boxCardShow0
        } else if (val === '1') {
          this.boxCardShow1 = !this.boxCardShow1
        }
      },
      // 三级连选 起运地地址
      startAddressChange(val) {
        const selectArr = val
        console.log('startAddressChange()-val', val)
        this.selectArea = Utils.areaCode2AreaName(selectArr)
        console.log('startAddressChange()-res_obj', this.selectArea)
        const { province, city, area } = this.selectArea
        this.condition.province = province
        this.condition.city = city
        this.condition.county = area
      },
      // 查询
      search() {
        this.getList()
      },
      // 重置
      resetSearch() {
        this.condition = {
          type: '',
          areaType: '',
          areaName: '',
          plateLicenseNo: '',
          fleetName: '',
          province: '',
          city: '',
          county: ''
        }
        this.leftPanel = true
        this.rightPanel = false
        this.rightAreaType = ''
        this.rightQueryType = ''
        this.leftHeaderTitle = '全国'
        this.rightHeaderTitle = '全国'
        this.countNum = {
          faultSum: 0, // 故障
          riskSum: 0, // 风险
          normalSum: 0, // 正常
          totalSum: 0
        }
        this.selectedOptionsStart = ['', '', '']
        this.getList()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .web_form.webForm_active{
    height: auto;
  }
  /*<!--common-->*/
  .c-1E90FF{
    color: #1E90FF;
  }
  .c-65ea8f{
    color: #65ea8f;
  }
  .c-e29136{
    color: #e29136;
  }
  .c-FFD700{
    color: #FFD700;
  }
  .c-ff340e{
    color: #ff340e;
  }
  .c-DDDCDC{
    /*color: #DDDCDC;*/
    color: #666;
  }
  .mr40{
    margin-right: 40px;
  }
  .ml5{
    margin-left: 5px;
  }
  .ml20{
    margin-left: 20px;
  }
  .bor-r-1{
    border-right: 1px solid #a6becf;
  }
  .bor-b-1{
    border-bottom: 1px solid #a6becf;
  }
  .pad-t40{
    padding-top: 40px;
  }
  .bgc-555555{
    /*background-color: #555555;*/
    background-color: white;
  }
  .bottom-box{
    width: 100%;
    position: absolute;
    bottom: 20px;
    z-index: 5;
  }
  /*web_form2*/
  .web_form{
    box-shadow:0 3px 2px  rgba(166,166,166,0.2), 3px 0 2px  rgba(166,166,166,0.2);
    margin: 0;
    padding-top: 15px;
    width: 100%;
    /*color: #fff;*/
    /*background-color: #3b4349;*/
    background-color: white;
  }
  .fixed-tool{
    top: 10px;
    left: 20px;
    right: 20px;
    width: auto;
    position: absolute;
    z-index: 5;
  }
  .main-header{
    color: #DEDEDE;
    z-index: 5;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .right-tip-panel{
    top: 130px;
    right: 20px;
    position: absolute;
    z-index: 6;
    padding: 10px;
    border-radius: 4px;
  }
  .left-count-panel{
    top: 130px;
    /*left: 20px;*/
    width: auto;
    position: absolute;
    z-index: 6;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    /*padding: 10px;*/
    /*color: #fff;*/
    /*background-color: #3b4349;*/
    /*background-color: white;*/
  }
  .box-card{
    /*color: #fff;*/
    /*background-color: #3b4349;*/
    background-color: white;
    min-width: 160px;
    border-radius: 4px;
    box-shadow:0 3px 2px  rgba(166,166,166,0.2), 3px 0 2px  rgba(166,166,166,0.2);
    padding: 10px;
  }
  .box-card-header{
    padding-bottom: 5px;
    display: flex;justify-content: space-between;align-items: center;font-size: 16px;
    /*color: #fff;*/
  }
  .box-card-content{
    border-radius: 4px;
    padding: 5px;
    /*background-color: #fff;*/
    /*color: #666;*/
    font-size: 14px;
  }
  /*lisa-card*/
  .lisa-card-one{
    /*background-color: #3b4349;*/
    border-radius: 16px;
    position: relative;
    padding: 40px 10px 10px 10px;
  }
  .lisa-card-header{
    text-align: left;
    font-size: 22px;
    border-bottom: 1px solid #a6becf;
  }
  .lisa-card-content{
    /*position: absolute;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    max-height: 750px;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .lisa-card-content-item{
    text-align: center;
    min-width: 120px;
    padding: 10px;
  }
  .lisa-card-content-item>.title{
    color: #DDDCDC;;
    font-size: 16px;
    margin-bottom: 15px;
  }
  .lisa-card-content-item>.subtitle{
    color: #95F204;
    font-weight: bold;
    font-size: 24px;
    overflow: hidden;
  }
  .lisa-card-content-item>.subtitle.red{
    color: #ed3f16;
    font-weight: bold;
    font-size: 24px;
    overflow: hidden;
  }
  .lisa-card-tool-wrapper{
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .lisa-card-tool{
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    /*background-color: #505b63;*/
    background-color: #6f6f6f;
    padding: 10px 25px 6px 30px;
    border-radius: 0 0 40px 40px;
    /*border-top: 40px solid #9cffc0;*/
    /*border-right: 40px solid transparent;*/
    /*border-left: 40px solid transparent;*/
  }
  .lisa-card-tool-item{
    min-width: 60px;
    font-size: 18px;
  }
  .lisa-card-tool-item2{
    display: flex;
    flex-wrap: wrap;
  }
  .lisa-card-tool-item2>div{
    width: 46%;
    text-align: left;
    padding-top: 10px;
  }
  .lisa-card-header2{
    /*color: #DDDCDC;*/
    color: #666;
    font-size: 16px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .lisa-card-tool-item3{
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .lisa-card-tool-item3>div{
    /*color: #DDDCDC;*/
    color: #666;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
  }
  .lisa-card-tool-item3>i.normal{
    color: #2ca723;
  }
  .lisa-card-tool-item3>i.warn{
    color: #ed3f16;
  }
  .flex-space-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
